import React from "react";
import DateFnsUtils from "@date-io/date-fns";
import BaseDataField from "../../base/BaseDataField";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { Bi } from "@/module-00-codebase/pkg-01-container";
import * as style from "./style";

export class DataField extends BaseDataField {
  public elmtView(): JSX.Element | null {
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker {...this.__defaultProps} value={this.getValue()} />
      </MuiPickersUtilsProvider>
    );
  }
  private __defaultProps = {
    disableToolbar: true,
    autoOk: true,
    InputAdornmentProps: { position: "start" },
    variant: "inline" as any,
    format: "yyyy-MM-dd",
    inputVariant: "outlined" as any,
    onChange: (value: any) => this.setValue(value),
    className: Bi.styleRenderer.render([this.props.className, style.defaultClass])
  };
  public getValue() {
    let value = super.getValue();
    if (typeof value === "number") {
      value = new Date(value);
    } else {
      value = null;
    }
    return value;
  }
}
